<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>部门管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改部门</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-form ref="addform" label-width="80px" size="mini" :model="addform">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="部门名称:">
              <el-input v-model="addform.name" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="详细描述:">
              <el-input v-model="addform.remark" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="2">
            <el-form-item>
              <el-button type="primary" size="small" @click="depteditbtn"
                >修改</el-button
              >
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button type="warning" size="small" @click="goback">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  created () {
    this.deptedit(this.$route.query.id);
    console.log(this.$route.query.id)

  },
  data () {
    return {
      addform: {
        // id: "",
        // name: "",
        // remark: "",
      }
    }
  },
  methods: {
    deptedit (id) {
      // Object.assign(this.addform, this.$route.query)
      this.$http.get("/dept/find",{params:{id:id}}).then(resp =>{
        console.log(resp)
        if(resp.data.flag){
          this.addform=resp.data.data
        }else{
          console.log("获取部门信息失败")
        }
      })
    },
    async depteditbtn () {
      const { data: res } = await this.$http.put('/dept/update', this.addform)
      if (res.code == 200) {
        this.$message.success(res.message);
      } else {
        this.$message.error(res.message);
      }
      this.$router.push('/deptlist')
    },
    goback () {
      window.history.back()
    }
  }
}
</script>

<style></style>
